<!-- 公告详情左边 -->
<template>
  <div class="container">
    <Nav></Nav>
    <div class="examInfor">
      <div class="infor_list">
        <div class="infor_content">
          <!-- 历年真题解析 -->
          <!-- 公告详情 -->
          <div class="shore_tab">
            <div class="shore_list">
              <router-link tag="li" to="/">首页</router-link>
              <li><img src="../../../assets/img/quick.png" alt=""></li>
              <nuxt-link tag="li" :href="type=='exam-id-cid' ? 'https://www.ansjy.cn/exam/2340/0' : 'https://www.ansjy.cn/testData/0'" :to="type =='exam-id-cid' ? '/exam/2340/0' : '/testData/0'">{{type == 'exam-id-cid' ? '招考公告' : '备考资料'}}</nuxt-link>
              <li><img src="../../../assets/img/quick.png" alt=""></li>
              <li>{{type == 'exam-id-cid' ? '公告详情' : '资料详情'}}</li>
            </div>
          </div>
          <!-- 公告详情 -->
          <!-- 文章列表 -->
          <div class="article_list">
            <div class="article_title">
              <h1>{{articleInfor.title}}</h1>
              <li>
                <p>发布时间：{{articleInfor.publish_time}}</p>
                <p>
                  <span v-show="articleInfor.from_way">来源：{{articleInfor.from_way}}</span>
                  <!-- <span>点击量：{{articleInfor.read_count}}</span> -->
                </p>
              </li>
            </div>
            <h3 class="article_content" v-html="articleInfor.news_content">
            </h3>
            <div class="article_down" v-if="articleInfor.download_name">
              <li>附件一：《{{articleInfor.download_name}}》</li>
              <li>下载</li>
            </div>
          </div>
        </div>
        <!-- 文章列表 -->
        <!-- 相关推荐 -->
        <!-- <Related></Related> -->
        <div class="related">
          <div class="related_title">相关推荐</div>
          <div class="related_list">
            <nuxt-link v-for="(item, index) of stickInfo" :key="index" tag="li" :to="'/examInfor/' + item.news_id + '/' + item.cat_one_id">
              <p>{{item.title}}</p>
              <p>{{item.publish_time}}</p>
            </nuxt-link>
          </div>
        </div>
      </div>
      <!--  -->
      <div class="notice_show">
        <div
          class="course_infor">
          <nuxt-link class="course_list" v-for="(item, index) of classList"
          :key="index"
          tag="div"
          :to="'/courseInfor/' + item.id">
            <div class="course_img">
              <img :src="item.banner_img" :alt="item.exam_name">
            </div>
            <div class="course_of">
              <li>{{item.exam_name}}</li>
              <li>{{item.start_time}} ～ {{item.end_time}}</li>
            </div>
            <div class="course_tea" v-if="false">
              <li v-for="(items, i) of item.teacher_lists" :key="i">
                <p><img :src="items.headimgurl" alt=""></p>
                <p>{{items.teacher_name}}</p>
              </li>
            </div>
          </nuxt-link>
        </div>
        <div
          class="show_img"
          v-for="(item, index) of eliveList"
          :key="index"
          v-show="item.is_now_live === 1">
          <li><img :src="item.img" alt=""></li>
          <li>{{item.name}}</li>
          <li>
            <p>{{item.teacher_name}}</p>
            <p>{{item.live_times}}</p>
            <p v-if="!item.url">即将开始</p>
            <p v-else><a :href="item.url" target="_blank" rel="noopener noreferrer">点击播放</a></p>
          </li>
        </div>
        <div class="get_notes">
          <li>关注公众号免费学课程</li>
          <li><img src="../../../assets/img/serve.jpg" alt=""></li>
        </div>
      </div>
      <!--  -->
    </div>
    <Bottom></Bottom>
  </div>
</template>

<script>
import Nav from '../../../components/Nav/nav'
import Bottom from '../../../components/Bottom/bottom'
export default {
  async asyncData ({app, params}) {
    let [data, data1, data2] = await Promise.all([
      app.$http.post('/news/getNewDetail', {
        news_id: params.id
      }),
      app.$http.post('/course/getExamLists', {
        is_top: 1,
        cat_one_id: params.cid,
        page: 1,
        page_count: 5
      }),
      app.$http.post('/news/newsLists', {
        news_type: 1,
        cat_one_id: params.cid,
        page: 1,
        page_count: 5
      })
    ])
    // 获取文章信息
    let lists = data.data.data
    var date = new Date(lists.publish_time * 1000)
    var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
    var D = (date.getDate() >= 10) ? (date.getDate()) : '0' + date.getDate()
    lists.publish_time = M + D
    // 获取右侧点击到课程详情
    let courList = data1.data.data
    courList.map((res, index) => {
      // 开始时间
      var date = new Date(res.start_time * 1000)
      var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
      var D = (date.getDate() >= 10) ? (date.getDate()) : '0' + date.getDate()
      var startTime = M + D
      // 结束时间
      var date1 = new Date(res.end_time * 1000)
      var M1 = (date1.getMonth() + 1 < 10 ? '0' + (date1.getMonth() + 1) : date1.getMonth() + 1) + '-'
      var D1 = (date1.getDate() >= 10) ? (date1.getDate()) : '0' + date1.getDate()
      var endTime = M1 + D1
      courList[index].start_time = startTime
      courList[index].end_time = endTime
    })
    // 相关公告
    let list = data2.data.data
    list.map((res, index) => {
      // 结束时间
      var date1 = new Date(res.publish_time * 1000)
      var M1 = (date1.getMonth() + 1 < 10 ? '0' + (date1.getMonth() + 1) : date1.getMonth() + 1) + '-'
      var D1 = (date1.getDate() >= 10) ? (date1.getDate()) : '0' + date1.getDate()
      var endTime = M1 + D1
      list[index].publish_time = endTime
    })
    // console.log(courList)
    return {
      articleInfor: lists,
      classList: courList,
      stickInfo: list
    }
  },
  head () {
    return {
      script: [
        { src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js' }
      ],
      title: this.articleInfor.title + '-岸上教育',
      meta:[{
        hid: 'description',
        name: 'description',
        content: this.articleInfor.description
      },{
        hid: 'Keywords',
        name: 'Keywords',
        content: this.articleInfor.keyword
      }]
    }
  },
  data () {
    return {
      // 导航分类
      type: '',
      navType: '',
      id: 0,
      cid: 0,
      articleInfor: [],
      // 相关推荐
      stickInfo: [],
      // 下载
      download_name: '',
      stickInfo: [],
      // 置顶信息
      stickInfo: [],
      // 课程列表
      classList: [],
      // 视频列表
      videoLists: [],
      // 一直播
      eliveList: [],
      // 右侧列表参数
      catId: 0,
      name: ''
    }
  },

  created () {
  },

  mounted () {
    this.type = localStorage.getItem('type')
    this.navType = this.$route.name
    this.id = this.$route.params.id
    this.cid = this.$route.params.cid
    this.name = this.$route.params.name
    this.getInfo()
    // this.stick()
    // this.getClass()
    this.getExam()
    this.elive()
    // this.KnownStick()
  },

  components: {
    Nav,
    Bottom
  },

  computed: {
    
  },

  methods: {
    // 考试列表
    getExam () {
      this.$http.post('/course/getExamLists', {
        is_top: 1,
        cat_one_id: this.cid,
        page: 1,
        page_count: 10
      }).then((res) => {
        this.classList = res.data.data
        this.classList.map((res, index) => {
          var startTime = this.getDay(res.start_time)
          var endTime = this.getDay(res.end_time)
          this.classList[index].start_time = startTime
          this.classList[index].end_time = endTime
        })
        // 遍历相同的exam_id 然后去重显示
        // let hash = {}
        // const newArr = this.classList.reduceRight((item, next) => {
        //   hash[next.exam_id] ? '' : hash[next.exam_id] = true && item.push(next)
        //   return item
        // }, [])
        // this.classList = newArr
      })
    },
    // 外链--e直播
    elive () {
      this.$http.post('/elive/getLiveLists', {
        page: 1,
        page_count: 3
      }).then((res) => {
        this.eliveList = res.data.data
        this.eliveList.map((r, index) => {
          this.eliveList[index].live_times = r.live_time.split(' ')[0]
        })
      })
    },
    // 置顶公告
    stick () {
      this.$http.post('/news/newsLists', {
        news_type: 1,
        is_top: 1
      }).then((res) => {
        this.stickInfo = []
        this.stickInfo = res.data.data
        this.stickInfo.map((res, index) => {
          var time = this.getDay(res.publish_time)
          this.stickInfo[index].publish_time = time
        })
      })
    },
    // ---------------------------------------------------------------------
    // 获取文章详情
    getInfo () {
      this.$http.post('/news/getNewDetail', {
        news_id: this.id
      }).then((res) => {
        this.articleInfor = res.data.data
        var time = this.getDay(this.articleInfor.publish_time)
        this.articleInfor.publish_time = time
        this.downLoad(this.articleInfor.download_name)
      })
    },
    // 下载资料
    downLoad (id) {
      var token = localStorage.getItem('token')
      this.$http.post('/news/downloadNewsFile', {
        news_id: id,
        token: token
      }).then((res) => {
        this.download_name = res.data.download_info
      })
    },
    // 相关推荐
    stick () {
      this.$http.post('/news/newsLists', {
        news_type: 1,
        cat_one_id: this.cid,
        page: 1,
        page_count: 5
      }).then((res) => {
        this.stickInfo = res.data.data
        this.stickInfo.map((res, index) => {
          var time = this.getDay(res.publish_time)
          this.stickInfo[index].publish_time = time
        })
      })
    },
    // 获取时间戳转年月日
    getDay (data) {
      var date = new Date(data * 1000)
      var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
      var D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
      return M + D
    }
  }
}

</script>
<style lang='scss' scoped>
.notice_show{
  width: 286px;
  height: auto;
}
.office_show{
  width: 286px;
  height: 323px;
  background: #ffffff;
  overflow: hidden;
  box-sizing: border-box;
  padding: 0px 12px;
}
.office_show .show_title{
  width: 100%;
  text-align: center;
  margin-top: 16px;
  margin-bottom: 12px;
}
.office_show .show_title_list{
  overflow: hidden;
  height: 255px;
}
.show_title_list li{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 8px;
  height:44px;
  font-size:16px;
  color:rgba(34,34,34,1);
  line-height:22px;
  cursor: pointer;
}
.show_title_list li p:first-child{
  width: 204px;
  height: 44px;
  line-height: 22px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
.show_title_list li:hover{
  color: rgba(24, 144, 255, 1);
}
.show_img{
  width: 286px;
  padding-bottom: 10px;
  margin-top: 30px;
  background: #ffffff;
}
.show_img li{
  font-size:16px;
  color:rgba(34,34,34,1);
  line-height:21px;
  cursor: pointer;
}
.show_img li:hover{
  color: rgba(24, 144, 255, 1);
}
.show_img li img{
  width: 286px;
  height: 286px;
}
.show_img li:nth-child(2){
  margin-top: 12px;
  box-sizing: border-box;
  padding-left: 12px;
}
.show_img li:last-child{
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 8px;
  box-sizing: border-box;
  padding-left: 12px;
}
.show_img li:last-child p:nth-child(2){
  margin-left: 24px;
}
.show_img li:last-child p:nth-child(3){
  margin-left: 54px;
  font-size: 12px;
  background: rgba(24, 144, 255, 1);
  color: #ffffff;
  border-radius: 10px;
  padding: 0px 10px;
}
.show_img li:last-child p:nth-child(3) a{
  color: #ffffff;
  text-decoration: none;
}
.get_notes{
  width: 286px;
  height: 247px;
  background: #ffffff;
  margin-top: 30px;
  box-sizing: border-box;
  padding: 16px;
}
.get_notes li:first-child{
  width: 100%;
  text-align: center;
}
.get_notes li:last-child{
  width: 100%;
  text-align: center;
  margin-top:30px;
}
.get_notes li img{
  width: 118px;
  height: 118px;
}
.course_infor{
  width: 286px;
  height: auto;
  cursor: pointer;
}
.course_list{
  width: 286px;
  height: auto;
  background:rgba(255,255,255,1);
  margin-top: 20px;
  padding-bottom: 10px;
}
.course_list:first-child{
  margin-top: 0px;
}
.course_list1{
  width: 286px;
  height: auto;
  background:rgba(255,255,255,1);
  margin-top: 20px;
}
.course_list1:first-child{
  margin-top: 0px;
}
.course_list1 .course_img{
  height: 286px;
}
.course_list1 .course_img img{
  height: 286px;
}
.course_of{
  box-sizing: border-box;
  padding: 0px 12px;
}
.course_of li:first-child{
  // height:22px;
  font-size:16px;
  color:rgba(34,34,34,1);
  line-height:22px;
  margin-top: 12px;
}
.course_of li:last-child{
  line-height: 25px;
}
// 12312
.course_of1{
  box-sizing: border-box;
  padding: 0px 12px;
}
.course_of1 li:first-child{
  // height: 22px;
  font-size:16px;
  color:rgba(34,34,34,1);
  line-height:22px;
  margin-top: 12px;
  flex-wrap: wrap;
  // overflow: hidden;
  // text-overflow: ellipsis;
  // display: -webkit-box;
  // -webkit-line-clamp: 1;
  // line-clamp: 1;
  // -webkit-box-orient: vertical;
}
.course_of1 li:last-child{
  line-height: 25px;
  padding-bottom: 10px;
}
// 123
.course_tea{
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 12px;
  box-sizing: border-box;
  padding: 0px 12px;
}
.course_tea li{
  margin-left: 20px;
}
.course_tea li:first-child{
  margin-left: 0px;
}
.course_tea li p:last-child{
  margin-top: 4px;
  text-align: center;
}
.course_tea li p img{
  width:50px;
  height:50px;
  border-radius: 50%;
}
.course_img{
  width: 100%;
  height: 160px;
  overflow: hidden;
}
.course_img img{
  width: 286px;
  height: 160px;
}
// ------------------------------------------------------------------------------------
.related{
  width:895px;
  height:277px;
  background:rgba(255,255,255,1);
}
.related_title{
  height: 53px;
  line-height: 53px;
  box-sizing: border-box;
  padding: 0px 24px;
  border-bottom: 1px solid rgba(240, 240, 240, 1);
  font-size:16px;
  color:rgba(34,34,34,1);
  margin-top: 30px;
}
.related_list{
  box-sizing: border-box;
  padding: 30px 64px 0px 24px;
}
.related_list li{
  display: flex;
  flex-direction: row;
  align-items: center;
  line-height: 33px;
  font-size:16px;
  color:rgba(34,34,34,1);
  cursor: pointer;
}
.related_list li p:first-child{
  // margin-left: 17px;
  width: 750px;
}
// -----------------------------------------------------------
.container{
  min-width: 1200px;
  background: rgb(234, 238, 239);
}
.examInfor{
  width: 1200px;
  min-height: 600px;
  margin: 40px auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  // background: #f9fafd;
}
.notice_show{
  width: 286px;
  height: auto;
}
.infor_list{
  width: 895px;
  height: auto;
}
// 岸上早知道
.shore_tab{
  width: 100%;
  box-sizing: border-box;
  padding-left: 17px;
  // margin-bottom: 30px;
}
.shore_list{
  display: flex;
  flex-direction: row;
  align-items: center;
  border-bottom: 1px solid rgba(240, 240, 240, 1);
}
.shore_list li{
  height: 55px;
  line-height: 55px;
  margin-left: 7px;
  cursor: pointer;
  font-size: 12px;
  box-sizing: border-box;
}
// 岸上早知道
// 文章列表
.article_list{
  width: 100%;
  height: auto;
  box-sizing: border-box;
  padding: 20px 24px;
  overflow: hidden;
}
.article_list img{
  width: 100%;
}
.article_title{
  width: 100%;
  height: auto;
  border-bottom: 1px dashed rgba(240, 240, 240, 1);
}
.article_title li{
  line-height: 30px;
}
.article_title h1{
  font-size: 22px;
  font-weight: normal;
}
.article_title li:first-child{
  font-size:22px;
  color:rgba(34,34,34,1);
  line-height:30px;
  letter-spacing:1px;
}
.article_title li:last-child{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  color:rgba(136,136,136,1);
  margin-top: 20px;
  padding-bottom: 20px;
}
.article_title li p span{
  margin-left: 20px;
}
.article_title li p span:first-child{
  margin-left: 0px;
}
.article_content{
  margin-top: 28px;
  font-weight: normal;
}
.article_content p a{
  width: 804px;
  height: 50px;
  line-height: 25px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.article_down{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  height:50px;
  background:rgba(250,250,250,1);
  border-radius:8px;
  border:1px solid rgba(240,240,240,1);
  box-sizing: border-box;
  padding: 0px 24px 0px 16px;
  margin-top: 30px;
}
.article_down li:first-child{
  color: rgba(24, 144, 255, 1);
}
.infor_content{
  width:895px;
  height:auto;
  background:rgba(255,255,255,1);
}
// 文章列表
</style>
